//巡店任务详情
<template>
  <view class="viewport">
    <scroll-view class="scroll_view" scroll-y show-scrollbar="false">
      <!-- <XtxSwiper class="banner" :list="imageList"></XtxSwiper> -->
      <view class="card">
        <view class="store_name_container">
          <image class="store_img" src="../../static/inspection/icon_store.png"></image>
          <view class="store_name">{{data.shopName}}</view>
        </view>
        <view class="row_container">
          <view class="row_container_title">模版名称:</view>
          <view class="row_container_content"> {{data.modelTaskName}}</view>
        </view>
        <view class="line"></view>
        <view class="row_container">
          <view class="row_container_title">创建人:</view>
          <view class="row_container_content"> {{data.username}}</view>
          <view class="end_time">{{'创建于'+data.gmtCreate}}</view>
        </view>
        <view class="line"></view>
        <view class="row_container">
          <view class="row_container_title">到期日期:</view>
          <view class="row_container_content"> {{data.endDate}}</view>
          <view class="end_time">xxxx 到期</view>
        </view>
        <view class="line"></view>
        <view class="row_container">
          <view class="row_container_title">检查方式:</view>
          <view class="row_container_content"> {{data.modelTaskName}}</view>
        </view>
      </view>
      <view class="card" v-for="(item,index) in data.modelTaskPatrolDomains" :key="index">
        <view class="row_container">
          <view class="row_container_title_large">点检项:</view>
          <view class="row_container_content_large"> {{item.checkitemName}}</view>
        </view>
        <view class="line"></view>
        <view class="row_container">
          <view class="row_container_title">分值:</view>
          <view class="row_container_content"> {{item.rpScore}}</view>
          <view class="end_time">{{'得分'+item.score}}</view>
        </view>
        <view class="line"></view>
        <view class="row_container">
          <view class="row_container_title">流程状态:</view>
          <view class="row_container_content_red"> {{statusList[item.dataState/10]}}</view>
        </view>
        <view class="line" v-if="item.executeNotes"></view>
        <view class="row_container">
          <view class="row_container_title">执行说明:</view>
          <view class="row_container_content"> {{item.executeNotes}}</view>
        </view>
        <view class="line"></view>
        <view class="row_container">
          <view class="row_container_title">提交时间:</view>
          <view class="row_container_content">{{item.gmtCreate}}</view>
        </view>
        <view class="line"></view>
        <view class="row_container">
          <view class="row_container_title">检查描述:</view>
          <view class="row_container_content">{{item.checkDescription||'暂无'}}</view>
        </view>
        <view class="line"></view>
        <view class="column_container" v-if="item.results == 0">
          <view class="instruction_name">执行说明:</view>
          <view class="text_container">
            <textarea class="text_area" v-model="item.executeNotes" placeholder="请在这里写内容(选填)"
              placeholder-style="font-size:30rpx"></textarea>
          </view>
        </view>
        <view class="column_container" v-if="item.dataState ==20">
          <view class="instruction_name">整改说明:</view>
          <view class="text_container">
            <textarea class="text_area" v-model="item.rectifyNotes" placeholder="请在这里写内容(选填)"
              placeholder-style="font-size:30rpx"></textarea>
          </view>
        </view>
        <view v-if="item.imgList.length>0" class="container_upload_img">
          <view class="item_upload_view" v-for="(imageItem, imageIndex) in item.imgList" :key="imageIndex">
            <image class="item_upload_img"
              :src="imageItem.isAdd?'../../static/inspection/icon_camera.png':imageItem.url"
              @click="tagClick(imageItem)">
            </image>
            <!--  <image class="item_delete" v-if="!imageItem.isAdd" src="../../static/icon_delete.png"
              @click.stop="deleteItem(item.imgList,imageIndex)">
            </image> -->
          </view>
        </view>
        <!-- 待执行 0 待整改 20 -->
        <view class="button_container" v-if="item.dataState == 0||item.dataState ==20">
          <button v-if="item.isPic" class="button" @click="goToCamera(index)">
            拍照
          </button>
          <button v-if="item.dataState == 0" class="button" @click="submit(item)">
            提交
          </button>
          <button v-if="item.dataState == 20" class="button" @click="recity(item)">提交整改</button>
        </view>

      </view>

    </scroll-view>



  </view>
</template>

<script setup lang="ts">
  import { onLoad } from '@dcloudio/uni-app';
  import { ref } from 'vue';
  import XtxSwiper from '@/components/XtxSwiper.vue';
  import type { BannerItem } from '@/types/home';
  import {
    getTaskDetail,
    excuteTask,
    recityTask

  } from '@/services/inspection';
  import { baseURL } from '@/utils/http';
  import { uploadFilePromise } from '@/utils/upload';
  import Func from '@/utils/func';

  //数据详情
  const data : any = ref({})
  const currentIndex = ref(0)
  //任务ID
  const clModelTaskId = ref<number>(0)
  const statusList = ref(["待执行", "待审核", "待整改", "已完成"])
  const imageList = ref<BannerItem[]>([{
    hrefUrl: '',
    id: '',
    imgUrl: 'https://www.huidagroup.com/uploadfile/image/20210406/161768163691426.jpg',
    type: 1,
  }])
  const query = defineProps<{ id : number }>()
  onLoad(() => {
    clModelTaskId.value = query.id
    //点听水印相机拍照结果
    uni.$on('wahterRemark', (result : any) => {
      console.log(result)
      console.log(data.value.modelTaskPatrolDomains[currentIndex.value])
      data.value.modelTaskPatrolDomains[currentIndex.value].imgList.splice(0, 0, {
        url: result.url,
        id: result.fileId,
        isAdd: false
      })
    })

    getData()
  })

  const getData = () => {
    getTaskDetail({ clModelTaskId: clModelTaskId.value }).then((res : any) => {
      //点检项列表

      res.modelTaskPatrolDomains.forEach((patrol : any) => {
        patrol.imgList = []
        //执行附件连接解析
        if (patrol.executeAttachUrl) {
          if (patrol.executeAttachUrl.includes(',')) {
            patrol.executeAttachUrl.split(',').forEach((url : any, index : number) => {
              patrol.imgList.push({
                url,
                id: '',
                isAdd: false
              })
            })
          } else {
            patrol.imgList.push({
              url: patrol.executeAttachUrl,
              id: '',
              isAdd: false
            })
          }
        }
        //整改附件
        if (patrol.rectifyAttachUrl && patrol.rectifyAttachId) {
          if (patrol.rectifyAttachUrl.includes(',') && patrol.rectifyAttachId.includes(',')) {
            const idlist = patrol.rectifyAttachId.split(',')
            patrol.rectifyAttachUrl.split(',').forEach((url : any, index : number) => {
              patrol.imgList.push({
                url,
                id: idlist[index],
                isAdd: false
              })
            })
          } else {
            patrol.imgList.push({
              url: patrol.rectifyAttachUrl,
              id: patrol.rectifyAttachId,
              isAdd: false
            })
          }

        }

      })


      data.value = res
      console.log(data.value)
      uni.setNavigationBarTitle({
        title: data.value.modelTaskName
      })
    }).catch(e => {
      console.log(e)
    })
  }
  //拍照
  const takePhoto = () => {
    const ctx = uni.createCameraContext();
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        console.log(res.tempImagePath)
      }
    });
  }
  //获取照片
  const getPhoto = () => {

  }
  //列表展示
  const tagClick = (item : any) => {
    console.log(item)

    var urls = []
    urls.push(item.url)
    uni.previewImage({
      urls: urls,
      current: 0,
      success: () => { },
      fail: () => { },
      complete: () => { },
    });

  }
  //跳转水印相机页面
  const goToCamera = (index : number) => {
    //记录当前项
    currentIndex.value = index
    uni.navigateTo({
      url: '/pages/camera/waterremark'
    })
  }
  //获取图片
  const openSelectImage = (images : any[]) => {
    console.log('openSelectImage')

    uni.chooseImage({
      count: 1,
      secret: false,
      position: 'back',
      sourceType: ['camera', 'album'],
      success: (res : any) => {
        console.log('选择的文件列表:', res.tempFiles[0].path);
        // res.tempFiles 结构： [{ path: '临时路径', name: '文件名', size: 文件大小, type: '文件类型' }]
        uploadFilePromise(res.tempFiles[0].path).then((result : any) => {
          console.log(result)
          images.splice(0, 0, {
            url: result.url,
            id: result.fileId,
            isAdd: false
          })
        })


      },
      fail: () => { },
      complete: () => { },
    });
  }

  //提交
  const submit = (item : any) => {
    if (Func.isEmpty(item.executeNotes)) {
      uni.showToast({
        title: '请填写执行说明',
        icon: 'none'
      })
      return
    }
    console.log(item)
    //链接转化
    const executeAttachUrl = item.imgList.map((item : any) => item.url).join(',')

    if (item.isPic == 1 && Func.isEmpty(executeAttachUrl)) {
      uni.showToast({
        title: '请上传图片',
        icon: 'none'
      })
      return
    }
    uni.showLoading({
      title: '',
      mask: true
    })
    excuteTask({
      modelTaskPatrolId: item.modelTaskPatrolId,
      executeNotes: item.executeNotes || '',
      executeAttachUrl
    }).then((res : any) => {
      console.log(res.success)
      if (res.success) {
        getData()
        uni.showToast({
          title: '更新成功',
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: '更新失败',
          icon: 'none'
        })
      }
    })
  }
  //任务整改
  const recity = (item : any) => {
    if (Func.isEmpty(item.executeNotes)) {
      uni.showToast({
        title: '请填写执行说明',
        icon: 'none'
      })
      return
    }
    //链接转化
    const rectifyAttachUrl = item.imgList.map((item : any) => item.url).join(',')
    if (item.isPic == 1 && Func.isEmpty(rectifyAttachUrl)) {
      uni.showToast({
        title: '请上传图片',
        icon: 'none'
      })
      return
    }
    uni.showLoading({
      title: '',
      mask: true
    })
    recityTask({
      modelTaskPatrolId: item.modelTaskPatrolId,
      executeNotes: item.executeNotes,
      rectifyAttachUrl
    }).then((res : any) => {
      console.log(res.success)
      if (res.success) {
        getData()
        uni.showToast({
          title: '更新成功',
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: '更新失败',
          icon: 'none'
        })
      }
    })
  }
</script>


<style>
  page {
    --nut-button-large-font-size: 34rpx;
    --nut-primary-color: #54B9CC;

  }

  .viewport {
    height: 100vh;
    background-color: rgba(249, 250, 251, 1);
    display: flex;
    flex-direction: column;
  }

  .scroll_view {
    flex: 1;
    height: 100%;
    padding: 20rpx;
  }

  ::-webkit-scrollbar {
    display: block;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: auto !important;
    background: transparent;
    overflow: auto !important;
  }

  .card {
    margin-top: 16rpx;
    background: #FFFFFF;
    display: flex;
    padding: 24rpx 16rpx;
    flex-direction: column;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(209, 227, 230, 0.58);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .banner {
    position: relative;
    z-index: 2;
  }

  .store_img {
    width: 60rpx;
    height: 60rpx;
  }

  .store_name {
    height: 48rpx;
    line-height: 48rpx;
    margin-left: 20rpx;
    font-size: 34rpx;
    font-weight: bold;
  }

  .instruction_name {
    font-size: 32rpx;
    font-weight: bold;
  }

  .store_name_container {
    margin: 24rpx 0rpx;
    display: flex;
    flex-direction: row;
  }

  .line {
    margin: 5rpx 0rpx;
    background-color: #F2F3F5;
    height: 1rpx;
  }

  .row_container {
    margin-top: 24rpx;
    margin-bottom: 24rpx;
    margin-left: 5rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .row_container_title {
    font-size: 30rpx;
    color: #1C253A
  }

  .row_container_content {
    font-size: 30rpx;
    margin-left: 15rpx;
    color: #394259
  }

  .row_container_title_large {
    font-size: 32rpx;
    color: #1C253A
  }

  .row_container_content_large {
    font-size: 32rpx;
    margin-left: 15rpx;
    color: black
  }

  .row_container_content_red {
    font-size: 30rpx;
    margin-left: 15rpx;
    color: #E02020
  }

  .end_time {
    color: #888E98;
    font-size: 26rpx;
    flex-grow: 1;
    text-align: end;
  }

  .column_container {
    margin-top: 24rpx;
    margin-bottom: 24rpx;
    margin-left: 5rpx;
    display: flex;
    flex-direction: column;
  }

  .text_container {
    background: #FFFFFF;
    height: 200rpx;
    width: 100%;
    margin-top: 30rpx;
    padding: 16rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 1rpx solid #F2F3F5;
  }

  .text_area {
    height: 200rpx;
  }

  .button_container {
    margin-top: 15rpx;
    display: flex;
    flex-direction: row;
    gap: 18rpx;
    justify-content: space-around;
  }

  .button {
    height: 80rpx;
    line-height: 80rpx;
    flex-grow: 1;
    font-size: 30rpx;
    background-color: #54B9CC;
    color: white;
    font-weight: bold;
    border-radius: 16rpx;
  }

  .container_upload_img {
    width: 93vw;
    display: flex;
    margin-left: 20rpx;
    margin-top: 10rpx;
    row-gap: 15rpx;
    column-gap: 12rpx;
    flex-wrap: wrap;


  }

  .item_upload_view {
    position: relative;
    display: flex;
    margin: 10rpx 5rpx;
    align-items: flex-end;
  }

  .item_delete {
    position: absolute;
    right: 2rpx;
    top: 2rpx;
    z-index: 100;
    width: 40rpx;
    height: 40rpx;
  }

  .item_upload_img {
    width: 176rpx;
    height: 176rpx;
    font-size: 28upx;
    color: #1685fb;
    text-decoration: underline
  }
</style>
